<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
		<style type="text/css">
			#container {
			    min-width: 300px;
			    max-width: 1000px;
			    height: 420px;
			    margin: 1em auto;
			}
		</style>
		<script type="text/javascript">/**
 * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
 * It also shows custom graphics drawn in the chart area on chart load.
 */


/**
 * Fires on chart load, called from the chart.events.load option.
 */
function onChartLoad() {

	var centerX = 140,
		centerY = 110,
		path = [],
		angle,
		radius,
		badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
		spike,
		empImage,
		big5,
		label,
		left,
		right,
		years,
		renderer;

	if (this.chartWidth < 530) {
		return;
	}

	// Draw the spiked disc
	for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
		radius = spike ? 80 : 70;
		path.push(
			'L',
			centerX + radius * Math.cos(angle),
			centerY + radius * Math.sin(angle)
		);
		spike = !spike;
	}
	path[0] = 'M';
	path.push('z');
	this.renderer.path(path)
		.attr({
			fill: badgeColor,
			zIndex: 6
		})
		.add();

	// Employee image overlay
	empImage = this.renderer.path(path)
		.attr({
			zIndex: 7,
			opacity: 0,
			stroke: badgeColor,
			'stroke-width': 1
		})
		.add();

	// Big 5
	big5 = this.renderer.text('5')
		.attr({
			zIndex: 6
		})
		.css({
			color: 'white',
			fontSize: '100px',
			fontStyle: 'italic',
			fontFamily: '\'Brush Script MT\', sans-serif'
		})
		.add();
	big5.attr({
		x: centerX - big5.getBBox().width / 2,
		y: centerY + 14
	});

	// Draw the label
	label = this.renderer.text('Highcharts Anniversary')
		.attr({
			zIndex: 6
		})
		.css({
			color: '#FFFFFF'
		})
		.add();

	left = centerX - label.getBBox().width / 2;
	right = centerX + label.getBBox().width / 2;

	label.attr({
		x: left,
		y: centerY + 44
	});

	// The band
	left = centerX - 90;
	right = centerX + 90;
	this.renderer
		.path([
			'M', left, centerY + 30,
			'L', right, centerY + 30,
			right, centerY + 50,
			left, centerY + 50,
			'z',
			'M', left, centerY + 40,
			'L', left - 20, centerY + 40,
			left - 10, centerY + 50,
			left - 20, centerY + 60,
			left + 10, centerY + 60,
			left, centerY + 50,
			left + 10, centerY + 60,
			left + 10, centerY + 50,
			left, centerY + 50,
			'z',
			'M', right, centerY + 40,
			'L', right + 20, centerY + 40,
			right + 10, centerY + 50,
			right + 20, centerY + 60,
			right - 10, centerY + 60,
			right, centerY + 50,
			right - 10, centerY + 60,
			right - 10, centerY + 50,
			right, centerY + 50,
			'z'
		])
		.attr({
			fill: badgeColor,
			stroke: '#FFFFFF',
			'stroke-width': 1,
			zIndex: 5
		})
		.add();

	// 2009-2014
	years = this.renderer.text('2009-2014')
		.attr({
			zIndex: 6
		})
		.css({
			color: '#FFFFFF',
			fontStyle: 'italic',
			fontSize: '10px'
		})
		.add();
	years.attr({
		x: centerX - years.getBBox().width / 2,
		y: centerY + 62
	});


	// Prepare mouseover
	renderer = this.renderer;
	if (renderer.defs) { // is SVG
		$.each(this.get('employees').points, function() {
			var point = this,
				pattern;
			if (point.image) {
				pattern = renderer.createElement('pattern').attr({
					id: 'pattern-' + point.image,
					patternUnits: 'userSpaceOnUse',
					width: 400,
					height: 400
				}).add(renderer.defs);
				renderer.image(
					'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
					centerX - 80,
					centerY - 80,
					160,
					213
				).add(pattern);

				Highcharts.addEvent(point, 'mouseOver', function() {
					empImage
						.attr({
							fill: 'url(#pattern-' + point.image + ')'
						})
						.animate({
							opacity: 1
						}, {
							duration: 500
						});
				});
				Highcharts.addEvent(point, 'mouseOut', function() {
					empImage.animate({
						opacity: 0
					}, {
						duration: 500
					});
				});
			}
		});
	}
}

$(function() {
	var options = {

		chart: {
			events: {
				load: onChartLoad
			}
		},

		xAxis: {
			type: 'datetime',
			minTickInterval: 365 * 24 * 36e5,
			labels: {
				align: 'left'
			},
			plotBands: [{
				from: Date.UTC(2009, 10, 27),
				to: Date.UTC(2010, 11, 1),
				color: '#EFFFFF',
				label: {
					text: '<em>Offices:</em><br> Torstein\'s basement',
					style: {
						color: '#999999'
					},
					y: 180
				}
			}, {
				from: Date.UTC(2010, 11, 1),
				to: Date.UTC(2013, 9, 1),
				color: '#FFFFEF',
				label: {
					text: '<em>Offices:</em><br> Tomtebu',
					style: {
						color: '#999999'
					},
					y: 30
				}
			}, {
				from: Date.UTC(2013, 9, 1),
				to: Date.UTC(2014, 10, 27),
				color: '#FFEFFF',
				label: {
					text: '<em>Offices:</em><br> VikØrsta',
					style: {
						color: '#999999'
					},
					y: 30
				}
			}]

		},

		title: {
			text: 'Highcharts and Highsoft timeline'
		},

		tooltip: {
			style: {
				width: '250px'
			}
		},

		yAxis: [{
			max: 100,
			labels: {
				enabled: false
			},
			title: {
				text: ''
			},
			gridLineColor: 'rgba(0, 0, 0, 0.07)'
		}, {
			allowDecimals: false,
			max: 15,
			labels: {
				style: {
					color: Highcharts.getOptions().colors[2]
				}
			},
			title: {
				text: 'Employees',
				style: {
					color: Highcharts.getOptions().colors[2]
				}
			},
			opposite: true,
			gridLineWidth: 0
		}],

		plotOptions: {
			series: {
				marker: {
					enabled: false,
					symbol: 'circle',
					radius: 2
				},
				fillOpacity: 0.5
			},
			flags: {
				tooltip: {
					xDateFormat: '%B %e, %Y'
				}
			}
		},

		series: [{
			type: 'spline',
			id: 'google-trends',
			dashStyle: 'dash',
			name: 'Google search for <em>highcharts</em>',
			data: [{
				x: 1258322400000,
				/* November 2009 */ y: 0
			}, {
				x: 1260961200000,
				y: 5
			}, {
				x: 1263639600000,
				y: 7
			}, {
				x: 1266188400000,
				y: 5
			}, {
				x: 1268740800000,
				y: 6
			}, {
				x: 1271368800000,
				y: 8
			}, {
				x: 1274004000000,
				y: 11
			}, {
				x: 1276639200000,
				y: 9
			}, {
				x: 1279274400000,
				y: 12
			}, {
				x: 1281952800000,
				y: 13
			}, {
				x: 1284588000000,
				y: 17
			}, {
				x: 1287223200000,
				y: 17
			}, {
				x: 1289858400000,
				y: 18
			}, {
				x: 1292497200000,
				y: 20
			}, {
				x: 1295175600000,
				y: 20
			}, {
				x: 1297724400000,
				y: 27
			}, {
				x: 1300276800000,
				y: 32
			}, {
				x: 1302904800000,
				y: 29
			}, {
				x: 1305540000000,
				y: 34
			}, {
				x: 1308175200000,
				y: 34
			}, {
				x: 1310810400000,
				y: 36
			}, {
				x: 1313488800000,
				y: 43
			}, {
				x: 1316124000000,
				y: 44
			}, {
				x: 1318759200000,
				y: 42
			}, {
				x: 1321394400000,
				y: 47
			}, {
				x: 1324033200000,
				y: 46
			}, {
				x: 1326711600000,
				y: 50
			}, {
				x: 1329303600000,
				y: 57
			}, {
				x: 1331899200000,
				y: 54
			}, {
				x: 1334527200000,
				y: 59
			}, {
				x: 1337162400000,
				y: 62
			}, {
				x: 1339797600000,
				y: 66
			}, {
				x: 1342432800000,
				y: 61
			}, {
				x: 1345111200000,
				y: 68
			}, {
				x: 1347746400000,
				y: 67
			}, {
				x: 1350381600000,
				y: 73
			}, {
				x: 1353016800000,
				y: 63
			}, {
				x: 1355655600000,
				y: 54
			}, {
				x: 1358334000000,
				y: 67
			}, {
				x: 1360882800000,
				y: 74
			}, {
				x: 1363435200000,
				y: 81
			}, {
				x: 1366063200000,
				y: 89
			}, {
				x: 1368698400000,
				y: 83
			}, {
				x: 1371333600000,
				y: 88
			}, {
				x: 1373968800000,
				y: 86
			}, {
				x: 1376647200000,
				y: 81
			}, {
				x: 1379282400000,
				y: 83
			}, {
				x: 1381917600000,
				y: 95
			}, {
				x: 1384552800000,
				y: 86
			}, {
				x: 1387191600000,
				y: 83
			}, {
				x: 1389870000000,
				y: 89
			}, {
				x: 1392418800000,
				y: 90
			}, {
				x: 1394971200000,
				y: 94
			}, {
				x: 1397599200000,
				y: 100
			}, {
				x: 1400234400000,
				y: 100
			}, {
				x: 1402869600000,
				y: 99
			}, {
				x: 1405504800000,
				y: 99
			}, {
				x: 1408183200000,
				y: 93
			}, {
				x: 1410818400000,
				y: 97
			}, {
				x: 1413453600000,
				y: 98
			}],
			tooltip: {
				xDateFormat: '%B %Y',
				valueSuffix: ' % of best month'
			}
		}, {
			name: 'Revenue',
			id: 'revenue',
			type: 'area',
			data: [
				[1257033600000, 2],
				[1259625600000, 3],
				[1262304000000, 2],
				[1264982400000, 3],
				[1267401600000, 4],
				[1270080000000, 4],
				[1272672000000, 4],
				[1275350400000, 4],
				[1277942400000, 5],
				[1280620800000, 7],
				[1283299200000, 6],
				[1285891200000, 9],
				[1288569600000, 10],
				[1291161600000, 8],
				[1293840000000, 10],
				[1296518400000, 13],
				[1298937600000, 15],
				[1301616000000, 14],
				[1304208000000, 15],
				[1306886400000, 16],
				[1309478400000, 22],
				[1312156800000, 19],
				[1314835200000, 20],
				[1317427200000, 32],
				[1320105600000, 34],
				[1322697600000, 36],
				[1325376000000, 34],
				[1328054400000, 40],
				[1330560000000, 37],
				[1333238400000, 35],
				[1335830400000, 40],
				[1338508800000, 38],
				[1341100800000, 39],
				[1343779200000, 43],
				[1346457600000, 49],
				[1349049600000, 43],
				[1351728000000, 54],
				[1354320000000, 44],
				[1356998400000, 43],
				[1359676800000, 43],
				[1362096000000, 52],
				[1364774400000, 52],
				[1367366400000, 56],
				[1370044800000, 62],
				[1372636800000, 66],
				[1375315200000, 62],
				[1377993600000, 63],
				[1380585600000, 60],
				[1383264000000, 60],
				[1385856000000, 58],
				[1388534400000, 65],
				[1391212800000, 52],
				[1393632000000, 72],
				[1396310400000, 57],
				[1398902400000, 70],
				[1401580800000, 63],
				[1404172800000, 65],
				[1406851200000, 65],
				[1409529600000, 89],
				[1412121600000, 100]
			],
			tooltip: {
				xDateFormat: '%B %Y',
				valueSuffix: ' % of best month'
			}

		}, {
			yAxis: 1,
			name: 'Highsoft employees',
			id: 'employees',
			type: 'area',
			step: 'left',
			tooltip: {
				headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
				pointFormat: '{point.name}<br><b>{point.y}</b>',
				valueSuffix: ' employees'
			},
			data: [{
				x: Date.UTC(2009, 10, 1),
				y: 1,
				name: 'Torstein worked alone',
				image: 'Torstein'
			}, {
				x: Date.UTC(2010, 10, 20),
				y: 2,
				name: 'Grethe joined',
				image: 'Grethe'
			}, {
				x: Date.UTC(2011, 3, 1),
				y: 3,
				name: 'Erik joined',
				image: null
			}, {
				x: Date.UTC(2011, 7, 1),
				y: 4,
				name: 'Gert joined',
				image: 'Gert'
			}, {
				x: Date.UTC(2011, 7, 15),
				y: 5,
				name: 'Hilde joined',
				image: 'Hilde'
			}, {
				x: Date.UTC(2012, 5, 1),
				y: 6,
				name: 'Guro joined',
				image: 'Guro'
			}, {
				x: Date.UTC(2012, 8, 1),
				y: 5,
				name: 'Erik left',
				image: null
			}, {
				x: Date.UTC(2012, 8, 15),
				y: 6,
				name: 'Anne Jorunn joined',
				image: 'AnneJorunn'
			}, {
				x: Date.UTC(2013, 0, 1),
				y: 7,
				name: 'Hilde T. joined',
				image: null
			}, {
				x: Date.UTC(2013, 7, 1),
				y: 8,
				name: 'Jon Arild joined',
				image: 'JonArild'
			}, {
				x: Date.UTC(2013, 7, 20),
				y: 9,
				name: 'Øystein joined',
				image: 'Oystein'
			}, {
				x: Date.UTC(2013, 9, 1),
				y: 10,
				name: 'Stephane joined',
				image: 'Stephane'
			}, {
				x: Date.UTC(2014, 9, 1),
				y: 11,
				name: 'Anita joined',
				image: 'Anita'
			}, {
				x: Date.UTC(2014, 10, 27),
				y: 11,
				name: ' ',
				image: null
			}]

		}]
	};

	// Add flags for important milestones. This requires Highstock.
	if (Highcharts.seriesTypes.flags) {
		options.series.push({
			type: 'flags',
			name: 'Cloud',
			color: '#333333',
			shape: 'squarepin',
			y: -80,
			data: [{
				x: Date.UTC(2014, 4, 1),
				text: 'Highcharts Cloud Beta',
				title: 'Cloud',
				shape: 'squarepin'
			}],
			showInLegend: false
		}, {
			type: 'flags',
			name: 'Highmaps',
			color: '#333333',
			shape: 'squarepin',
			y: -55,
			data: [{
				x: Date.UTC(2014, 5, 13),
				text: 'Highmaps version 1.0 released',
				title: 'Maps'
			}],
			showInLegend: false
		}, {
			type: 'flags',
			name: 'Highcharts',
			color: '#333333',
			shape: 'circlepin',
			data: [{
				x: Date.UTC(2009, 10, 27),
				text: 'Highcharts version 1.0 released',
				title: '1.0'
			}, {
				x: Date.UTC(2010, 6, 13),
				text: 'Ported from canvas to SVG rendering',
				title: '2.0'
			}, {
				x: Date.UTC(2010, 10, 23),
				text: 'Dynamically resize and scale to text labels',
				title: '2.1'
			}, {
				x: Date.UTC(2011, 9, 18),
				text: 'Highstock version 1.0 released',
				title: 'Stock',
				shape: 'squarepin'
			}, {
				x: Date.UTC(2012, 7, 24),
				text: 'Gauges, polar charts and range series',
				title: '2.3'
			}, {
				x: Date.UTC(2013, 2, 22),
				text: 'Multitouch support, more series types',
				title: '3.0'
			}, {
				x: Date.UTC(2014, 3, 22),
				text: '3D charts, heatmaps',
				title: '4.0'
			}],
			showInLegend: false
		}, {
			type: 'flags',
			name: 'Events',
			color: '#333333',
			fillColor: 'rgba(255,255,255,0.8)',
			data: [{
				x: Date.UTC(2012, 10, 1),
				text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway',
				title: 'Award'
			}, {
				x: Date.UTC(2012, 11, 25),
				text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.',
				title: 'First book'
			}, {
				x: Date.UTC(2013, 4, 25),
				text: 'Highsoft nominated Norway\'s Startup of the Year',
				title: 'Award'
			}, {
				x: Date.UTC(2014, 4, 25),
				text: 'Highsoft nominated Best Startup in Nordic Startup Awards',
				title: 'Award'
			}],
			onSeries: 'revenue',
			showInLegend: false
		});
	}

	$('#container').highcharts(options);
});</script>
	</head>

	<body>
		<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
		<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
		<div id="container"></div>
	</body>

</html>